<template>
  <!--  -->
  <NConfigProvider
    :theme="getDarkTheme"
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="getThemeOverrides"
  >
    <AppProvider>
      <RouterView />
    </AppProvider>
  </NConfigProvider>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, watch } from "vue";
import { darkTheme, zhCN, dateZhCN } from "naive-ui";
import { AppProvider } from "@/components/Application";
import { useDesignSettingStore } from "@/store/modules/designSetting";
import { lighten } from "@/utils/index";

const designStore = useDesignSettingStore();

// 主题颜色覆盖
const getThemeOverrides = computed(() => {
  console.log("appTheme: ", designStore.appTheme);
  const appTheme = designStore.appTheme;
  const lightenStr = lighten(designStore.appTheme, 6);
  return {
    common: {
      primaryColor: appTheme,
      primaryColorHover: lightenStr,
      primaryColorPressed: lightenStr,
    },
    LoadingBar: {
      colorLoading: appTheme,
    },
  };
});

// watch(
//   () => designStore.appTheme,
//   (to) => {
//     console.log("to: ", to);
//     designStore.appTheme = to;
//   }
// );

// 主题切换  深色 浅色
const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));

</script>

<style lang="less">
@import "styles/index.less";
</style>
